<template>
	<div class="crud-container flex-column plr-1 pt-1">
		<!-- <cl-tabs-card v-model="activeTab" :tabs="tabs" /> -->
		<cl-flex1 style="overflow: hidden">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<template v-for="tab in tabs">
						<component
							:key="tab.name"
							:is="tab.name + '-list'"
							v-if="activeTab == tab.name"
						/>
					</template>
				</keep-alive>
			</transition>
		</cl-flex1>
		<promo-statistics ref="promoStatistics" />
	</div>
</template>

<script>
import WechatList from "./components/report/wechat";
import ChannelList from "./components/report/channel";
// import SupplierList from "./components/report/supplier";
// 推广统计
import PromoStatistics from "./components/report/promo-statistics";

export default {
	name: "WideLandingReport",
	provide() {
		return {
			parent: this
		};
	},
	components: {
		WechatList,
		ChannelList,
		// SupplierList,
		PromoStatistics
	},
	data() {
		return {
			activeTab: "wechat",
			tabs: [
				{ label: "加微方式", name: "wechat" }
				// { label: "渠道ID", name: "channel" }
				// { label: "广告账户ID", name: "supplier" }
			]
		};
	},

	methods: {
		openStatistics(data) {
			this.$refs.promoStatistics.open(data);
		}
	}
};
</script>

<style lang="scss" scoped>
.crud-container {
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
}
</style>
